<template>
  <div class="nav-container">
    <router-link to="/customer"><img src="../../assets/logo.png" class="logo-image"/></router-link>
    <div class="nav-user-info">
      <span class="user-name">下午好, {{ this.$store.state.currentUser.username ? this.$store.state.currentUser.username : 'Guest' }} !</span>
      <span class="user-logio" v-if="this.$store.state.currentUser.username" @click="dashboard">个人中心</span>
      <span class="user-logio" v-if="this.$store.state.currentUser.username" @click="logout">登出</span>
      <router-link to="/customer/login/index" v-else class="user-logio">登录或注册</router-link>
      <img :src="this.$common.getResourceUrl(this.$store.state.currentUser.image)" class="user-image" v-if="this.$store.state.currentUser.username"/>
      <img src="../../assets/images/customer/default_user_icon.png" class="user-image" v-else/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomerNav',
  methods: {
    logout () {
      this.$customerAPI.user_logout().then((params) => {
        this.$store.state.currentUser = {
          id: '',
          username: '',
          image: ''
        }
      })
      switch (this.$route.name) {
        case 'CustomerOrderDetails':
          this.$router.push('/customer/store/' + this.$store.state.currentShoppingCart.store['id'])
          break
        case 'CustomerDashboard':
          this.$router.push('/customer')
          break
      }
    },
    dashboard () {
      this.$router.push('/customer/dashboard')
    }
  }
}
</script>

<style scoped>
  a {
    text-decoration: none;
  }
  .nav-container {
    width: 100%;
    padding: 35px 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .logo-image {
    width: 284px;
    height: 58px;
    padding: 0 150px;
  }
  .nav-user-info {
    padding: 0 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .user-name {
    font-size: 16px;
    letter-spacing: 1px;
    color: white;
    margin-right: 32px;
  }
  .user-logio {
    font-size: 15px;
    letter-spacing: 3px;
    color: white;
    margin-right: 32px;
    cursor: pointer;
  }
  .user-image {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
  }
</style>
